<template>
  <div class="SearchAddress">
    <div class="con">
      <input type="search"
             placeholder="请输入小区/写字楼/学校等"
             v-model="detail">
      <input type="submit"
             @click="btnAction">
    </div>

    <ul>
      <li v-for="(item,index) in details"
          :key="index"
          @click="detailAction(item)">
        <h4>{{item.name}}</h4>
        <p>{{item.address}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'SearchAddress',
  data () {
    return {
      details: [],
      detail: '',
    }
  },
  methods: {
    btnAction () {
      this.$axios.get('https://elm.cangdu.org/v1/pois', {
        params: {
          type: 'nearby',
          keyword: this.detail,
        }
      }).then(res => {
        // console.log(res);
        this.details = res.data
        // console.log(this.details)
      }).catch(err => console.log(err))
    },

    //点击地址详情
    detailAction (item) {
      this.$router.push({ name: 'AddAddress', params: { datas: item.name } })
    }
  },
}
</script>

<style lang="less">
.SearchAddress {
  background-color: white;
  .con {
    padding: 16px;
    input[type="search"] {
      background-color: #f5f5f5;
      width: 75%;
      height: 35px;
      border: 1px solid #e4e4e4;
      outline: none;
      border-radius: 5px;
      padding: 0 6px;
      box-sizing: border-box;
      margin-right: 3px;
      font-weight: normal;
      font-size: 16px;
      margin-right: 10px;
    }
    input[type="submit"] {
      width: 20%;
      height: 35px;
      background-color: #3190e8;
      color: white;
      font-weight: 700;
      border-radius: 5px;
      border: none;
      outline: none;
      font-size: 16px;
    }
  }

  ul {
    padding: 16px;
    li {
      padding: 16px 0;
      border-bottom: 0.1px solid #f5f5f5;
      h4 {
        font-size: 16px;
        color: #555;
        font-weight: normal;
      }
      p {
        font-size: 15px;
        color: #999;
      }
    }
  }
}
</style>